<template>
    <div class="shop-preview" style="padding-bottom: 40px">
        <div class="tip-line">
            <cell-tip tip="仅支持更换/显示/隐藏订单和服务菜单" />
        </div>

        <div class="prediv-head">
            <img
                class="prediv-head__nav"
                :src="proxy.imgUrl + 'tenant_593be52a46f869eea8b31d146d21de7a/album/202304/20230413_b1ed5adafc642b6b771dc2806949aa40.png'"
            />
            <span class="nav-name">我的</span>
            <img class="head-icon" src="https://saas.huashushop.com/saas/img/a24.png" />
            <div class="head-box">
                <div class="cen-info">
                    <div class="info-img">
                        <el-image fit="cover" src="https://saas.huashushop.com/saas/img/headimg.png" />
                    </div>
                    <div class="info-right">
                        <p class="cen-nick">游客</p>
                        <div class="right-two flexs">
                            <div class="right-two__uid">UID：24018</div>
                            <div class="right-two__cz">
                                设置<el-icon size="14px">
                                    <ArrowRight />
                                </el-icon>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="cen-count">
                    <div class="cen-count__one flexs">
                        <div class="cen-count__left"><img src="https://saas.huashushop.com/saas/img/a9.png" />了解更多会员权益</div>
                        <div class="cen-count__right">
                            <div class="cen-count__div">
                                查看
                                <el-icon color="#FEF5E0" size="14px">
                                    <ArrowRight />
                                </el-icon>
                            </div>
                        </div>
                    </div>
                    <div class="cen-count__two flexs">
                        <div class="cen-count__item">
                            <div class="cen-count__nums">0</div>
                            <div class="cen-count__text">优惠券(张)</div>
                        </div>
                        <div class="cen-count__item">
                            <div class="cen-count__nums">0.00</div>
                            <div class="cen-count__text">授信额度(元)</div>
                        </div>
                        <div class="cen-count__item">
                            <div class="cen-count__nums">0.00</div>
                            <div class="cen-count__text">余额(元)</div>
                        </div>
                    </div>
                </div>
                <!-- 我的订单 -->
                <div :class="[{ 'select-item': type == 0 }, 'white-pub-10 home-nav']" @click="clickType(0)">
                    <div class="order-one flexs">
                        <p class="order-h3">我的订单</p>
                        <p class="order-h3__more">
                            全部<el-icon size="14px">
                                <ArrowRight />
                            </el-icon>
                        </p>
                    </div>
                    <div class="cen-order">
                        <div class="cen-order__item" v-for="(item, index) in orders" :key="index">
                            <img class="cen-order__img" :src="item.icon" fit="cover" />
                            <div class="cen-order__title line-one">{{ item.name }}</div>
                            <div class="order-badge" v-if="item.nums">{{ item.nums }}</div>
                        </div>
                    </div>
                </div>
                <!-- 每日账单 -->
                <div class="white-pub-10 flexs center-two">
                    <div class="center-two__left">
                        <div class="center-two__title">每日账单</div>
                        <div class="center-two__text">记录您的每一笔资金往来</div>
                    </div>
                    <img class="center-two__right" src="https://saas.huashushop.com/saas/img/a53.png" />
                </div>
                <!-- 我的服务 -->
                <div :class="[{ 'select-item': type == 1 }, 'white-pub-10 home-nav']" @click="clickType(1)">
                    <div class="order-one flexs">
                        <p class="order-h3">我的服务</p>
                        <p class="order-h3__more">
                            全部<el-icon size="14px">
                                <ArrowRight />
                            </el-icon>
                        </p>
                    </div>
                    <div class="vip-three__list">
                        <template v-for="(item, index) in navMain" :key="index">
                            <div class="cen-item" v-if="item.show">
                                <el-image fit="cover" :src="item.icon" />
                                <div class="cen-item__name">{{ item.name }}</div>
                            </div>
                        </template>
                    </div>
                </div>
            </div>
        </div>
        <div class="prediv-foot flexs">
            <div :class="[{ 'nav-active': cur === index }, 'nav-item']" v-for="(item, index) in navs" :key="index">
                <el-image :src="cur === index ? item.selectedIconPath : item.iconPath" fit="cover" />
                <p class="nav-text" :style="{ color: cur === index ? item.selectedColor : item.color }">{{ item.text }}</p>
            </div>
        </div>
    </div>
    <div class="preview-edit">
        <div class="preview-edit__head">
            <div class="preview-edit__head-one flexs">
                <p>个人中心</p>
            </div>
            <div class="preview-edit__head-dec">
                <p>更换/显示/隐藏订单和服务菜单</p>
            </div>
        </div>
        <div class="hot-box">
            <p class="hot-item__title">{{ type == 0 ? "我的订单" : "我的服务" }}</p>
            <!-- 导航 -->
            <div class="better-list">
                <div class="better-item" v-for="(item, index) in arr_data" :key="index">
                    <div class="better-item__one flexs" v-if="item.url">
                        <p class="better-item__left">是否显示</p>
                        <div class="better-item__right">
                            <el-switch v-model="item.show" />
                        </div>
                    </div>
                    <div class="better-item__one flexs" v-if="type == 1">
                        <p class="better-item__left">菜单名称</p>
                        <div class="better-item__right">
                            <el-input v-model="item.name" maxlength="5" clearable placeholder="最多5个字" />
                        </div>
                    </div>
                    <div class="better-item__one flexs" style="align-items: flex-start">
                        <p class="better-item__left" v-if="type == 1">菜单图片</p>
                        <p class="better-item__left" v-else>{{ item.name }}</p>
                        <div class="better-item__right better-img-box">
                            <div class="better-img" @click.stop="clickImg(item, index)">
                                <el-image :src="item.icon" fit="cover" />
                                <span class="better-img__tip">更换</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 图片库 -->
    <picture-library :show="showImg" :select_multiple="false" @close="showImg = false" @select="selectImg"> </picture-library>

    <div class="foot-btn flexs-center">
        <el-button type="primary" size="large" :loading="btn_loading" @click="handleConfirm">保存</el-button>
    </div>
</template>

<script setup>
import { getCurrentInstance, ref, onMounted } from "vue"
import { ArrowRight } from "@element-plus/icons-vue"
import PictureLibrary from "@components/PictureLibrary.vue"
import CellTip from "@components/cell-tip.vue"

const { proxy } = getCurrentInstance()

onMounted(() => {
    getConfigs()
})

function getConfigs() {
    proxy.$axios
        .get("decorate/ucenter")
        .then((res) => {
            if (res.data.code == 0) {
                let result = res.data.data
                arr_data.value = result.style.orders
                orders.value = result.style.orders
                navMain.value = result.style.navMain
            } else {
                proxy.$message({ message: res.data.msg, type: "error" })
            }
        })
        .catch((err) => {})
}

// 保存
const btn_loading = ref(false)
const handleConfirm = () => {
    let objs = {
        orders: orders.value,
        navMain: navMain.value,
    }
    btn_loading.value = true
    proxy.$axios
        .post("decorate/ucenter", {
            style: JSON.stringify(objs),
        })
        .then((res) => {
            btn_loading.value = false
            if (res.data.code == 0) {
                proxy.$message({ message: "保存成功！", type: "success" })
            } else {
                proxy.$message({ message: res.data.msg, type: "error" })
            }
        })
        .catch((err) => {
            btn_loading.value = false
        })
}

/**
 * 导航栏
 */
const cur = 3
const navs = [
    {
        color: "#9c9c9c",
        selectedColor: "#0AC393",
        pagePath: "pages/index/index",
        text: "首页",
        iconPath: "https://saas.huashushop.com/saas/img/a1.png",
        selectedIconPath: "https://saas.huashushop.com/saas/img/a2.png",
    },
    {
        color: "#9c9c9c",
        selectedColor: "#0AC393",
        pagePath: "pages/classify/classify",
        text: "分类",
        iconPath: "https://saas.huashushop.com/saas/img/a3.png",
        selectedIconPath: "https://saas.huashushop.com/saas/img/a4.png",
    },
    {
        color: "#9c9c9c",
        selectedColor: "#0AC393",
        pagePath: "pages/cart/cart",
        text: "购物车",
        iconPath: "https://saas.huashushop.com/saas/img/a5.png",
        selectedIconPath: "https://saas.huashushop.com/saas/img/a6.png",
    },
    {
        color: "#9c9c9c",
        selectedColor: "#0AC393",
        pagePath: "pages/center/center",
        text: "我的",
        iconPath: "https://saas.huashushop.com/saas/img/a7.png",
        selectedIconPath: "https://saas.huashushop.com/saas/img/a8.png",
    },
]

/**
 * 我的订单
 */
const orders = ref([
    {
        icon: "https://saas.huashushop.com/saas/img/a32.png",
        name: "待付款",
        status: 1,
        nums: 0,
    },
    {
        icon: "https://saas.huashushop.com/saas/img/a30.png",
        name: "备货中",
        status: 2,
        nums: 0,
    },
    {
        icon: "https://saas.huashushop.com/saas/img/a33.png",
        name: "待发货",
        status: 3,
        nums: 0,
    },
    {
        icon: "https://saas.huashushop.com/saas/img/a31.png",
        name: "待收货",
        status: 4,
        nums: 0,
    },
    {
        icon: "https://saas.huashushop.com/saas/img/a35.png",
        name: "已完成",
        status: 5,
        nums: 0,
    },
])

/**
 * 我的服务
 */
const navMain = ref([
    {
        name: "售后服务",
        icon: "https://saas.huashushop.com/saas/img/a19.png",
        url: "../refundList/refundList",
        show: true,
    },
    {
        name: "交易须知",
        icon: "https://saas.huashushop.com/saas/img/a14.png",
        url: "../newList/newList?cid=2",
        cate_id: 2,
        show: true,
    },
    {
        name: "关注店铺",
        icon: "https://saas.huashushop.com/saas/img/a17.png",
        url: "../collectStore/collectStore",
        show: true,
    },
    {
        name: "收藏商品",
        icon: "https://saas.huashushop.com/saas/img/a13.png",
        url: "../collectGoods/collectGoods",
        show: true,
    },
    // {
    //     name: "每日账单",
    //     icon: "https://saas.huashushop.com/saas/img/i15.png",
    //     url: "../billDaily/billDaily",
    //     show: true,
    // },
    {
        name: "推广中心",
        icon: "https://saas.huashushop.com/saas/img/a20.png",
        url: "../promotionCenter/promotionCenter",
        show: true,
    },
    {
        name: "交易趋势",
        icon: "https://saas.huashushop.com/saas/img/a11.png",
        url: "../transactionTrend/transactionTrend",
        show: true,
    },
    {
        name: "地址管理",
        icon: "https://saas.huashushop.com/saas/img/a18.png",
        url: "../address/address",
        show: true,
    },
    {
        name: "银行卡管理",
        icon: "https://saas.huashushop.com/saas/img/s6.png",
        url: "../bank/bank",
        show: true,
    },
    {
        name: "供应商注册",
        icon: "https://saas.huashushop.com/saas/img/a12.png",
        url: "../supplierApply/supplierApply",
        show: true,
    },
    {
        name: "联系客服",
        icon: "https://saas.huashushop.com/saas/img/a16.png",
        url: "../contactService/contactService",
        show: true,
    },
    {
        name: "意见反馈",
        icon: "https://saas.huashushop.com/saas/img/i14.png",
        url: "../feedback/feedback",
        show: true,
    },
    {
        name: "关于平台",
        icon: "https://saas.huashushop.com/saas/img/a15.png",
        url: "../aboutUs/aboutUs",
        show: true,
    },
])

/**
 * 更换导航图标和控制显示隐藏
 * @param {Number} type 0是订单，1是我的服务
 */
const type = ref(0)
const arr_data = ref([])
const clickType = (types) => {
    type.value = types
    arr_data.value = types == 0 ? orders.value : navMain.value
}

/**
 * 添加/更换图片
 * @param {Boolean} showImg 显示图片库
 * @param {Number} arr_index 数组索引
 * @param {Object} arr_item 数据项
 * @param {Function} clickImg 点击更换图片，
 * @param {Function} selectImg 选择图片
 */
const showImg = ref(false)
const arr_index = ref("")
const arr_item = ref({})
const clickImg = (item, index) => {
    arr_item.value = item
    arr_index.value = index
    showImg.value = true
}
const selectImg = (val) => {
    showImg.value = false
    arr_item.value.icon = proxy.imgUrl + val[0].photo
}
</script>
<script>
export default {
    name: "DecoCenter",
}
</script>

<style lang="less" scoped>
.select-item {
    border: 1px solid #fd7047 !important;
}

.hot-item__title {
    font-weight: bold;
}

.hot-box {
    padding: @padding-md @padding-md @padding-xl;

    .better-list {
        margin-top: @margin-sm;
        border-radius: @radius-xs;
        background-color: #f7f8fa;
        padding: 14px;

        &:first-child {
            margin-top: 0;
        }

        .better-item {
            box-shadow: 0 0px 4px 0 rgba(0, 0, 0, 0.1);
            padding: @padding-sm @padding-md @padding-md;
            margin-bottom: @margin-sm;
            position: relative;
            background-color: #fff;

            .better-img-box {
                display: flex;
            }

            .better-img {
                flex: none;
                margin-right: 10px;
                position: relative;
                width: 50px;
                height: 50px;
                text-align: center;
                background-color: @gray-2;
                border: 1px solid #e5e5e5;
                cursor: pointer;
                overflow: hidden;

                .better-img__tip {
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    width: 100%;
                    height: 20px;
                    line-height: 20px;
                    font-size: @font-size-sm;
                    color: #fff;
                    background: rgba(0, 0, 0, 0.5);
                    text-align: center;
                }
            }

            .better-item__one {
                font-size: @font-size-md;
                color: @gray-6;
                margin-top: @margin-sm;

                .better-item__left {
                    flex: none;
                    margin-right: @margin-mdl;
                }

                .better-item__right {
                    flex: 1;

                    .better-item__home {
                        color: @gray-8;
                        display: flex;
                        align-items: center;

                        .el-icon {
                            cursor: pointer;
                            margin-left: @margin-base;
                        }
                    }
                }
            }
        }
    }
}

.preview-edit {
    flex: none;
    width: 376px;
    height: 958px;
    background-color: #fff;
    overflow-y: auto;

    /*滚动条整体样式*/
    &::-webkit-scrollbar {
        /*高宽分别对应横竖滚动条的尺寸*/
        width: 4px;
        height: 1px;
    }

    /*滚动条里面小方块*/
    &::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background: @gray-4;
    }

    /*滚动条里面轨道*/
    &::-webkit-scrollbar-track {
        border-radius: 10px;
        background: #f1f1f1;
    }

    .preview-edit__head {
        border-bottom: 1px solid #f2f4f6;
        padding: @padding-lg @padding-md;

        .preview-edit__head-one {
            font-size: 18px;
            font-weight: bold;
            color: @gray-8;
        }

        .preview-edit__head-dec {
            font-size: @font-size-md;
            color: @gray-6;
            margin-top: @margin-sm;
        }
    }
}

.tip-line {
    flex: none;
    width: 100%;
}

.shop-preview {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background-color: #fff;
    margin-right: @margin-sm;
    position: relative;
    flex-direction: column;
    min-height: calc(100vh - 120px);
    padding: @padding-mdl;
}

.white-pub-10 {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
}

.vip-three__list {
    display: flex;
    flex-flow: row wrap;
    padding: 8px 0px 0px;
}

.cen-item {
    width: 25%;
    text-align: center;
    margin-bottom: 26px;

    .el-image {
        width: 35px;
        height: 35px;
    }
}

.cen-item__name {
    font-size: 14px;
    color: #333;
    margin-top: 5px;
}

.home-nav {
    width: calc(100% - 28px);
    margin: 10px auto;
    cursor: pointer;
    border: 1px solid #fff;

    .order-one {
        padding: 10px 16px;
    }

    .order-h3 {
        flex: 1;
        color: #000e37;
        font-size: 15px;
        font-weight: bold !important;
    }

    .order-h3__more {
        font-size: 12px;
        color: @gray-6;
        display: flex;
        align-items: center;
    }

    .cen-order {
        display: flex;
        align-items: center;
    }

    .cen-order__item {
        flex: none;
        width: 20%;
        padding: 5px 0px 16px;
        text-align: center;
        position: relative;
    }

    .order-badge {
        top: 8px;
        right: 10px;
        position: absolute;
        min-width: 16px;
        padding: 0px 3px;
        font-size: 12px;
        background-color: #fd7047;
        line-height: 1.2;
        border-radius: 999px;
        color: #fff;
    }

    .cen-order__img {
        width: 40px;
    }

    .cen-order__title {
        font-size: 14px;
        color: #000e37;
        margin-top: -2px;
    }
}

.cen-count {
    background: linear-gradient(to right, #171312, #504f4e);
    height: 130px;
    position: relative;
    width: calc(100% - 28px);
    margin: 0 auto;
    margin-bottom: 10px;
    z-index: 10;
    border-radius: 10px;
    overflow: hidden;

    .cen-count__one {
        padding: 0px 14px;
        height: 46px;
        overflow: hidden;
    }

    .cen-count__left {
        flex: 1;
        font-size: 14px;
        background-image: linear-gradient(#fffae8, #f9c08e);
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
        display: flex;
        align-items: center;
    }

    .cen-count__left img {
        width: 16px;
        margin-right: 6px;
    }

    .cen-count__div {
        color: #fef5e0;
        font-size: 13px;
        display: flex;
        align-items: center;
    }

    .cen-count__right {
        flex: none;
    }

    .cen-count__btn {
        border-radius: 999px;
        overflow: hidden;
        font-size: 12px;
        color: #171312;
        background: linear-gradient(#fcf1df, #ecb57f);
        padding: 5px 14px;
    }

    .cen-count__two {
        background: #fff;
        height: 84px;
        overflow: hidden;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }

    .cen-count__item {
        width: 33.33%;
        text-align: center;
    }

    .cen-count__nums {
        font-size: 16px;
        color: #000e37;
        font-weight: bold;
        margin-bottom: 6px;
    }

    .cen-count__text {
        font-size: 13px;
        color: #606881;
    }
}

.cen-info {
    padding: 0px 20px;
    display: flex;
    align-items: center;
    z-index: 10;
    position: relative;
    margin-bottom: 24px;

    .info-img {
        flex: none;
        width: 55px;
        height: 55px;
        margin-right: 10px;
    }

    .info-right {
        color: #fff;
        flex: 1;
        overflow: hidden;
    }

    .cen-nick {
        font-size: 16px;
        margin-bottom: 10px;
    }

    .right-two {
        margin-top: 5px;
    }

    .right-two__uid {
        font-size: 14px;
        color: rgba(255, 255, 255, 0.8);
    }

    .right-two__cz {
        font-size: 14px;
        color: #fff;
        display: flex;
        align-items: center;
    }
}

.center-two {
    width: calc(100% - 28px);
    margin: 10px auto;
    padding: 12px 14px;

    .center-two__left {
        flex: 1;
        overflow: hidden;

        .center-two__title {
            font-size: 16px;
            font-weight: bold;
            color: #000e37;
        }

        .center-two__text {
            font-size: 13px;
            color: #8f95a5;
            margin-top: 8px;
        }
    }

    .center-two__right {
        flex: none;
        width: 110px;
        overflow: hidden;
    }
}

.prediv-head {
    width: 375px;
    position: relative;

    .prediv-head__nav {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 5;
        width: 100%;
    }

    .nav-name {
        position: absolute;
        top: 50px;
        left: 14px;
        color: #fff;
        z-index: 6;
        font-size: 16px;
    }

    .head-icon {
        position: absolute;
        top: 30px;
        right: 0;
        z-index: 6;
        width: 200px;
    }

    .head-box {
        padding-top: 88px;
        position: relative;
        background: linear-gradient(#0ac393, #f7f7f9);
        width: 100%;
        min-height: 350px;
        padding-bottom: 20px;
    }
}

.prediv-foot {
    min-height: 1px;
    text-align: center;
    background-color: #fff;
    width: 375px;
    box-shadow: 0px -2px 8px 0 rgb(0 0 0 / 10%);
    overflow: hidden;
    height: 50px;

    .nav-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        overflow: hidden;

        .el-image {
            width: 26px;
            height: 26px;
        }

        .nav-text {
            margin-top: 2px;
            font-size: @font-size-sm;
        }
    }
}
</style>
